<template>
	<view class="detail-view">
		<view class="top-bar">
			<uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar>
		</view>


		<view class="praceView">
			<view class="praceViewTitle">
				{{ issueInfo.title }}
			</view>

			<view class="praceViewTime">
				<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" src="@/pagesB/static/sj.png" mode=""></image>{{ issueInfo.submitTime }}
			</view>
		</view>
		
		<!-- <view class="praceViewTitle2">
			提交人：{{ issueInfo.dbzjDeptName }}
		</view> -->
		
		
		<!-- <view class="infoView">
			<u-read-more showHeight="220" ref="uReadMore">
				<rich-text :nodes="issueInfo.contact"></rich-text>
			</u-read-more>
		</view> -->
		
		<view class="infoView"  :style="zkshow ? '' : 'height: 240rpx;'">
				{{ issueInfo.contact }}
			</view>
			
			
		
		
		<view class="zkView" v-if="!zkshow && isNeedZK" @click="zkshow = true"><text class="zkViewIn">.....</text> 展开</view>
		 
		
		
		
		
		<view class="gksjview2">
			<view class="gksjview2Left">公开时间</view>
			<view class="gksjview2Right">{{ msIssueOpen.openStart + ' 至 ' + msIssueOpen.openEnd }}</view>
			
		</view>
		
		<u-gap v-if="msIssueConsult.msIssueConResultList.length !== 0" height="20" bgColor="#F6F7FB"></u-gap>
		
		<view class="praceViewTitle2" v-if="msIssueConsult.msIssueConResultList.length !== 0">
			议事结果
		</view>
		
		<view class=""  v-if="msIssueConsult.msIssueConResultList.length !== 0" v-for="(item,index) of msIssueConsult.msIssueConResultList" :key="index">
			<view class="infoView2">
				{{ item.conResult }}
			</view>
			
			<view style="background-color: #FFFFFF;padding: 20upx 28upx;margin: 0 40rpx;" class="">
				<view class="fileList2">
					<view  class="fileList2Item" v-for="(fileItem,fileIndex) of item.fileRepositorylist"
						@tap="$showLine(fileItem)">
						<view class="fileList2ItemLeft">
							<image src="@/pagesB/static/doc.png" mode=""></image>
						</view>
						<view class="fileList2ItemCenter">
							<view class="">
								{{ fileItem.name }}
							</view>
			
							<view class="" style="display: flex;align-items: center;">
								<view class="" style="flex: 1;color: #999999;font-size: 12px;padding-top: 10upx;">
									{{ fileItem.size }}
								</view>
			
								<view class="" style="flex: 1;text-align: right;color: #0077FF;font-size: 12px;">
									预览
								</view>
							</view>
						</view>
						<!-- <view class="fileList2ItemRight" @tap="toDelete(index,'file')">
							预览
						</view> -->
						
					</view>
					
					
				</view>
			</view>
			
			<u-gap v-if="index + 1 !== msIssueConsult.msIssueConResultList.length" marginTop="20" marginBottom="20" height="2" bgColor="#F6F7FB"></u-gap>
		</view>
		
		<u-gap marginTop="20" marginBottom="20" height="20" bgColor="#F6F7FB"></u-gap>
		
		
		<view class="praceViewTitle2">
			办理情况
		</view>
		
		<view class="gksjview2">
			<view class="gksjview2Left">办理单位</view>
			<view class="gksjview2Right"> <text>{{ msIssueConsult.msIssueConHandle.submitName }}</text></view>
		</view>
		
		<view class="infoView2">
			{{ msIssueConsult.msIssueConHandle.hanResult }}
		</view>
		
		<u-gap height="20" bgColor="#F6F7FB"></u-gap>
		
		
		<view class="gksjview2">
			<view class="gksjview2Left">提交人</view>
			<view class="gksjview2Right">{{ issueInfo.submitName }}</view>
		</view>
		
		<view class="gksjview2">
			<view class="gksjview2Left">联系电话</view>
			<view class="gksjview2Right">{{ issueInfo.phone }}</view>
		</view>
		
		<view class="gksjview2">
			<view class="gksjview2Left">所属代表之家</view>
			<view class="gksjview2Right">{{ issueInfo.dbzjDeptName }}</view>
		</view>
		
		<u-gap height="2" bgColor="#F6F7FB"></u-gap>
		
		<view class="likeNumView">
			<view class="likeNumViewItem" @click="isDZ()">
				<view class="likeNumViewItemLeft">
					<u-icon size="40" :name=" !isLike ? 'thumb-up' : 'thumb-up-fill'" :color=" !isLike ? '#999' : '#F5A623'"></u-icon>
				</view>
				<view class="likeNumViewItemRight">
					<text class="line">{{ msIssueLikeNum ? msIssueLikeNum : 0 }}</text>
				</view>
			</view>
		</view>
		
		<u-gap height="20" bgColor="#F6F7FB"></u-gap>
		
		<view class="wylyView">
			<view class="wylyViewTitle">
				我要留言
			</view>
			
			<view class="" style="border: 2rpx solid #F6F7FB;margin-top: 20rpx;padding: 20rpx 20rpx 0 20rpx;">
				<view class="">
					 <u-input
					    placeholder="内容"
					    input-align="left"
					    v-model="plQuery.issueCmt.content"
						height="178"
						:custom-style="{ 'background-color': '#F6F7FB', 'padding': '15rpx' }" 
						type="textarea"
					  ></u-input>
				</view>
				 
				<view class="wylyViewBtnView">
					<view class="wylyViewBtnViewItem" style="margin-right: 40rpx;"  @click="setPl">
						提交
					</view>
					<view class="wylyViewBtnViewItem"  @click="plQuery.issueCmt.content = ''">
						重置信息
					</view>
				</view>
			</view>
		</view>
		
		<u-gap height="20" bgColor="#F6F7FB"></u-gap>
		
		
		<view class="wylyView">
			<view class="wylyViewTitle">
				留言记录
			</view>
		</view>
		
		<view class="listDzList">
			<view class="listDzListItemin" v-for="(item,index) of plList" >
				<view class="listDzListItem" v-if="item.isNode == 'msgk'">
					<view class="listDzListItemLeft">
						<image src="@/pagesB/static/avatar.png" mode=""></image>
					</view>
					<view class="listDzListItemCenter">
						<view class="listDzListItemCenterTop">
							{{ item.name }}
						</view>
						<view class="listDzListItemCenterCenter2">
							{{ item.content }}
						</view> 
					</view>
					<!-- <view class="listDzListItemRight">
						删除
					</view> -->
				</view>
		
				<view class="listDzListItemText" v-if="item.isNode == 'msgk'">
					{{ item.createTime }}
				</view>
			</view>
		
		</view>
		
		<!-- <view class="info-comment" >
			<view class="inr">
				<u-input inputAlign="left" v-model="plQuery.issueCmt.content" type="text" placeholder="输入评论内容" style="width: 100%;" />
				<u-button class="form-btn" type="info" :hairline="false" size="medium" @click="setPl">发表</u-button>
		
				<view class="like" @click="isDZ()">
					<u-icon v-if="isLike" size="40" name="thumb-up-fill" color="#D0021B"></u-icon>
					<u-icon v-else size="40" name="thumb-up" color="#999"></u-icon>
					<text class="line" :style="{ color: isLike ? '#D0021B' : '' }">{{ msIssueLikeNum ? msIssueLikeNum : 0 }}</text>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import uniParse from '@/components/uni-parse/parse.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniParse
		},
		data() {
			return {
				repUserId:'',
				zkshow:false,
				isNeedZK:false,
				msIssueLikeNum:0,
				isLike:false,
				plQuery:{
					issueCmt:{
						issueId:'',//主键id
						type:'2',//
						userId:'',//用户id
						openId:'',//微信opid
						name:'',//用户名
						phone:'',//手机号
						content:'',//评论内容
						repUserId:''
					}
				},
				dzQuery:{
					issueLike:{
						issueId:'',//主键id
						type:'1',//
						userId:'',//用户id
						openId:'',//微信opid
						name:'',//用户名
						phone:'',//手机号
						content:'',//评论内容
						repUserId:''
					}
				},
				plList:[],
				id: '',
				fileList_Info: [],
				issueAudit: {},
				issueInfo: {},
				msIssueCmt: [],
				msIssueConsult: {},
				msIssueDisclosure: {},
				msIssueLike: [],
				msIssueOpen: {},
				msIssueSurvey: {},
				clientCode: '',
				userId: ''
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.ifDZ()
				this.getD()
				this.getPL()
				// this.getDZ()
			}
			
			if(option.repUserId){
				this.repUserId = option.repUserId
			}
		},
		onHide() {},
		onUnload() {},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			setPl(){
				let that = this
				
				if(!this.plQuery.issueCmt.content){
					this.$msg('请输入内容')
					return
				}
				
				let url = '/msIssueInfo/addCmtOpn';
				let a = JSON.parse(JSON.stringify(that.plQuery))
				a.issueCmt.issueId = that.id
				a.issueCmt.isNode = 'msgk'
				a.issueCmt.userId = that.userInfo.sysUser.id
				a.issueCmt.openId = that.userInfo.userId
				a.issueCmt.name = that.userInfo.sysUser.userName
				a.issueCmt.phone = that.userInfo.sysUser.phone
				
				if(this.repUserId){
					a.issueCmt.repUserId = that.repUserId
				}else{
					if(uni.getStorageSync('repUserId')){
						a.issueCmt.repUserId = uni.getStorageSync('repUserId')
					}
				}
				
				this.$request(url, a , {
					load: false
				}).then((res) => {
					if(res.code == 200){
						that.$msg('留言提交成功，请在留言记录里面进行查看')
						that.getPL()
						that.plQuery.issueCmt.content = ''
						that.$forceUpdate()
					}
				});
			},
			isDZ(){
				let that = this
				let url = '/msIssueInfo/addLikeOpn';
				let a = JSON.parse(JSON.stringify(that.dzQuery))
				a.issueLike.issueId = that.id
				a.issueLike.isNode = 'msgk'
				a.issueLike.userId = that.userInfo.sysUser.id
				a.issueLike.openId = that.userInfo.userId
				a.issueLike.name = that.userInfo.sysUser.userName
				a.issueLike.phone = that.userInfo.sysUser.phone
				
				if(this.repUserId){
					a.issueLike.repUserId = that.repUserId
				}else{
					if(uni.getStorageSync('repUserId')){
						a.issueLike.repUserId = uni.getStorageSync('repUserId')
					}
				}
				
				
				this.$request(url, a , {
					load: true
				}).then((res) => {
					if(res.code == 200){
						if(res.msg == '取消点赞成功！'){
							that.isLike = false
							that.msIssueLikeNum--
						}else{
							that.isLike = true
							that.msIssueLikeNum++
						}
					}
					that.$msg(res.msg)
				});
			},
			ifDZ(){
				let that = this
				let url = '/msIssueInfo/getLikeFlag';
				this.$request(url, {
					openId: that.userInfo.userId,
					issueId: that.id,
					isNode:'msgk'
				}, {
					load: true
				}).then((res) => {
					if(res.code == 200){
						that.isLike = res.data
					}
				});
			},
			getDZ() {
				let that = this
				let url = '/msIssueInfo/snumList';
				this.$request(url, {
					type: '',
					issueId: that.id
				}, {
					load: true
				}).then((res) => {
					if(res.code == 200){
						// that.plList = res.data.cmtRecords
					}
				});
			},
			getPL() {
				let that = this
				let url = '/msIssueInfo/getCmtList';
				this.$request(url, {
					issueId: that.id,
					currentUserId: that.userInfo.sysUser.id
				}, {
					load: false
				}).then((res) => {
					if(res.code == 200){
						that.plList = res.data.records
					}
				});
			},
			getD() {
				let that = this
				let url = '/msIssueInfo/queryAll';
				this.$request(url, {
					id: that.id,
					clientCode: "370782" 
				}, {
					load: true
				}).then((res) => {
					// if(res.data.msIssueConsult){
					// 	res.data.msIssueConsult.conMebList = JSON.parse(res.data.msIssueConsult.conMeb)
					// }
					
					
					this.fileList_Info = res.data.fileList_Info
					this.issueAudit = res.data.issueAudit
					this.issueInfo = res.data.issueInfo
					this.msIssueCmt = res.data.msIssueCmt
					this.msIssueConsult = res.data.msIssueConsult
					this.msIssueDisclosure = res.data.msIssueDisclosure
					this.msIssueLike = res.data.msIssueLike
					this.msIssueOpen = res.data.msIssueOpen
					this.msIssueSurvey = res.data.msIssueSurvey
					this.msIssueLikeNum = res.data.msIssueMsgkSLikeNum
					
					if(this.issueInfo.contact.length > 100){
						this.isNeedZK = true
					}else{
						this.isNeedZK = false
					}
					
					this.$nextTick(() => {
										this.$refs.uReadMore.init();
									})
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail-view {
		min-height: 100vh;
		background-color: #fff;
	}
	
	.praceViewTitle2 {
		padding: 20upx 38upx;
		font-size: 17px;
		color: #333333;
		font-weight: bold;
	}
	
	.praceView {
		.praceViewTitle {
			margin: 40upx 38upx;
			font-size: 24px;
			
			line-height: 35px;
			padding: 10upx;
			color: #D0021B;
			font-weight: bold;
			background-color: #fceff1;
		}
		
		

		.praceViewTime {
			display: flex;
			align-items: center;
			padding: 0upx 38upx 10upx 38upx;
			color: #999999;
			font-size: 14px;
		}
	}

	.intitle {
		height: 100upx;
		line-height: 100upx;
		padding: 0 40upx;
		color: #333333;
		font-size: 17px;
		font-weight: bold;
	}

	.textA {
		padding: 0 40upx;
		font-size: 17px;
		color: #333333;
		word-break: break-word;
	}

	.fileList2 {
		padding: 0 40upx;
		background-color: #F6F7FB;

		.fileList2Item {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 10upx 0;

			.fileList2ItemLeft {
				flex: 1;
				text-align: left;
				padding: 0 10upx 0 0;

				image {
					width: 44upx;
					height: 52upx;
				}
			}

			.fileList2ItemCenter {
				padding: 0 0 0 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 7;
				font-size: 15px;
				color: #333333;
			}

			.fileList2ItemRight {
				flex: 1;
				text-align: right;

				image {
					width: 32upx;
					height: 32upx;
					position: relative;
					left: 30upx;
				}
			}
		}

		.fileListItemAudio {
			display: flex;
			align-items: center;
			width: 120upx;
			height: 60upx;
			background-color: #0077FF;

			.fileListItemAudioLeft {
				flex: 1;

				.fileListItemAudioLeftImg {
					width: 24upx;
					height: 24upx;
				}
			}
		}
	}


	.formView {
		.formViewItem {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx;
			border-bottom: 1upx solid #F6F7FB;

			.formViewItemLeft {
				flex: 1;
				text-align: left;
				color: #999999;
				font-size: 17px;
			}

			.formViewItemRight {
				flex: 1.5;
				text-align: right;
				color: #333333;
				font-size: 17px;
			}
		}

		.textA {
			padding: 0 40upx;
			font-size: 17px;
			color: #333333;
			word-break: break-word;
		}
	}

	.listDzList {
		.listDzListItemin{
			border-bottom: 1upx solid #f5f7fa;
		}
		
		
		.listDzListItem {
			display: flex;
			align-items: center;
			padding: 20upx;
			
	
			.listDzListItemLeft {
				flex: 1;
	
				padding-left: 15upx;
	
				image {
					width: 52.5upx;
					height: 52.5upx;
				}
			}
	
			.listDzListItemCenter {
				flex: 7;
	
				.listDzListItemCenterTop {
					color: #AD8E77;
					font-size: 14px;
				}
	
				.listDzListItemCenterCenter {
					font-size: 15px;
					color: #666666;
				}
	
				.listDzListItemCenterCenter2 {
					color: #999999;
					padding-top: 10upx;
					font-size: 13px;
				}
			}
	
			.listDzListItemRight {
				flex: 1;
				font-size: 14px;
				color: #999999;
	
				image {
					width: 36upx;
					height: 32upx;
				}
			}
	
		}
	
		.listDzListItemText {
			padding: 0upx 0 20upx 110upx;
			font-size: 12px;
			color: #999999;
		}
	}

	.gksjview {
		font-size: 17px;
		color: #999999;
		line-height: 80upx;
		padding: 0 40upx;
	}
	
	.gksjview2{
		font-size: 15px;
		line-height: 90upx;
		padding: 0 40upx;
		
		
		display: flex;
		align-items: center;
		.gksjview2Left{
			flex: 2;
			text-align: left;
			color: #999999;
		}
		
		.gksjview2Right{
			flex: 5;
			color:#333333;
			text-align: right;
		}
	}
	
	.gksjview3{
		font-size: 17px;
		color:#333333;
		line-height: 80upx;
		padding: 0 40upx;
	}

	.infoView {
		color: #333333;
		font-size: 34rpx;
		padding: 8upx;
		min-height: 240rpx;
		overflow:hidden;
		background-color: #f6f7f8;
		margin: 20upx 40upx 50upx 40upx;
		border-bottom: 1upx solid #F6F7FB;
		border-top: 1upx solid #F6F7FB;
	}
	
	.infoView2 {
		color: #333333;
		font-size: 34rpx;
		
		line-height: 70rpx;
		padding: 10upx 20upx;
		background-color: #f6f7f8;
		margin: 20upx 40upx;
		border-bottom: 1upx solid #F6F7FB;
		border-top: 1upx solid #F6F7FB;
	}
	
	
	
	
	.info-comment {
		height: 114rpx;
	
		.like {
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			padding: 0 20rpx;
			flex-shrink: 0;
			font-weight: bold;
			font-size: 14px;
			line-height: 70rpx;
			border-radius: 70rpx;
			background-color: #ececec;
	
			.line {
				margin-left: 10rpx;
			}
		}
	
		.inr {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 11px 30rpx;
			border-top: 1rpx solid #f1f2f3;
			background-color: #fff;
		}
	}
	
	
	
	.fileList2 {
		padding: 0 40upx;
		background-color: #F6F7FB;
	
		.fileList2Item {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 10upx 0;
			
			.fileList2ItemLeft {
				flex: 1;
				text-align: left;
				padding: 0 10upx 0 0;
	
				image {
					width: 44upx;
					height: 52upx;
				}
			}
	
			.fileList2ItemCenter {
				padding: 0 0 0 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 7;
				font-size: 15px;
				color: #333333;
			}
	
			.fileList2ItemRight {
				flex: 1;
				text-align: right;
	
				image {
					width: 32upx;
					height: 32upx;
					position: relative;
					left: 30upx;
				}
			}
		}
	
		.fileListItemAudio {
			display: flex;
			align-items: center;
			width: 120upx;
			height: 60upx;
			background-color: #0077FF;
	
			.fileListItemAudioLeft {
				flex: 1;
	
				.fileListItemAudioLeftImg {
					width: 24upx;
					height: 24upx;
				}
			}
		}
	}
	
	.infoText{
		color: #333333;
		font-size: 17px;
	}
	
	.gksjview3{
		font-size: 17px;
		color:#333333;
		line-height: 80upx;
		padding: 0 40upx;
	}
	
	.likeNumView{
		text-align: center;
		line-height: 138upx;
		height: 138upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.likeNumViewItem{
			display: flex;
			align-items: center;
			width: 200upx;
			height: 72upx;
			justify-content: center;
			border: 2upx solid #F6F7FB;
			border-radius: 50upx;
			
			.likeNumViewItemLeft{
				
			}
			
			.likeNumViewItemRight{
				padding-left: 10upx;
			}
		}
	}
	
	.wylyView{
		padding: 16upx 28upx;
		.wylyViewTitle{
			color: #333333;
			font-size: 17px;
			font-weight: bold;
		}
		
		.wylyViewBtnView{
			display: flex;
			align-items: center;
			justify-items: center;
			justify-content: center;
			height: 118upx;
			
			.wylyViewBtnViewItem{
				width: 188upx;
				height: 66upx;
				line-height: 66upx;
				text-align: center;
				background-color: #D0021B;
				font-size: 13px;
				color: #FFFFFF;
			}
		}
	}
	
	.zkView{
		background-color: #f6f7f8;
		font-size: 40upx;
		color: #D0021B;
		display: inline-block;
		position: relative;
		right: -559rpx;
		 top: -100rpx;
		
		.zkViewIn{
			color: #333333 !important;
		}
	}
</style>
